 <template>
    <div>
        <van-icon @click="$router.go(-1)" size="33px" class="clickback" name="arrow-left"  />
        <Swiper :bannerArr="gallery"></Swiper>
        <div >
            <div class="canshu"> <van-icon name="passed" /><p>30天无忧退货</p></div>
            <div class="canshu"> <van-icon name="passed" /><p>48小时快速退费</p></div>
            <div class="canshu"> <van-icon name="passed" /><p>满88元免邮费</p></div>
                

            
            <div v-html="goods_desc"></div>
        </div>
        <!-- 加入购物车底部栏 -->
        <van-goods-action>
            <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
            <van-goods-action-icon icon="cart-o" text="购物车" :badge="badge" @click="$router.push('/car')" />
            <van-goods-action-button type="warning" text="加入购物车" @click="addCarMaskFn" />
            <van-goods-action-button type="danger" text="立即购买" @click="buyFn" />
        </van-goods-action>

        <!-- 商品规则弹窗 -->
        <van-sku v-model="show" :sku="sku" :goods="goods" :goods-id="goodsId" :hide-stock="sku.hide_stock"
            @buy-clicked="onBuyClicked" @add-cart="onAddCartClicked" ref="myref" />
    </div>
</template>
 <script>
//引入接口http
import { getDetail, addCarData ,getGoodsCount } from '@/utils/http'
//引入轮播图组件
import Swiper from "@/components/Swiper.vue";
export default {
    name: '',
    props: [''],
    data() {
        return {
            gallery: [],//详情页轮播图数组 
            show: false, //是否显示规格面板
            goods: {
                picture: "",  // 弹出的商品展示面板上当前商品的的缩略图
            },//当前商品对象信息
            goodsId: '',//当前商品的id
            sku: {
                //商品数据 数据结构见下方文档
                tree: [],
                price: "1111.00", //默认价格 单位元
                stock_num: 999,//商品总库存
                hide_stock: false, // 是否隐藏剩余库存
            },
            id: '', //产品id，来自productList的第一个数组项中的id
            badge: 0, //当前购物车商品总数量
            goods_desc:'' //详情页图片
        }
    },
    components: {
        Swiper,
    },
    watch: {},
    methods: {
       
        addCarMaskFn() {
            //点击购物车弹框
            this.show = true;
        },
        onBuyClicked() {
            //点击购买
              this.$toast({
                        type: "success",
                        message: "你买不起",
                        duration: 1000,
                    })
        },
        onAddCartClicked() {
            //点击加入购物车
            //获取当前商品面板的组件实例对象 (该对象中该对象中getSkuData方法 可以获取到当前购买的商品的数量)
            // console.log(this.$refs.myref.getSkuData());
            addCarData({
                goodsId: this.goodsId,
                productId: this.id,
                number: this.$refs.myref.getSkuData().selectedNum,
            }).then(res => {
                console.log(res);
              
                if (res.data.errno == 0) {
                    //添加购物车成功
                    // console.log(this);
                    //隐藏面板
                    this.show = false
                    //获取当前的商品的总数量并赋值给badge
                    this.badge = res.data.data.cartTotal.goodsCount
                    this.$toast({
                        type: "success",
                        message: "已加入购物车",
                        duration: 1000,
                    });
                } else {
                    //加入失败
                    this.$toast({
                        type: "fail",
                        message: "添加失败",
                        duration: 1000,
                    })
                }
            })
        },
        buyFn(){
            this.$toast({
                        type: "success",
                        message: "你买不起",
                        duration: 1000,
                    })
        }

    },
    beforeCreate() { },
    created() {
        //   console.log(this.$route.query);
        getDetail(this.$route.query).then(res => {
            console.log(res);
            this.gallery = res.data.data.gallery;
            //map 返回值返回的是一个新的数组，forEach没有返回值
            this.gallery = this.gallery.map((item) => {
                item.image_url = item.img_url;
                return item;
            });
            //给当前组件上的数据分别赋值
            this.goods.picture = res.data.data.info.list_pic_url
            this.sku.price = res.data.data.info.retail_price
            this.sku.stock_num = res.data.data.info.goods_number;
            this.goodsId = res.data.data.info.id;
            this.id = res.data.data.productList[0].id;
            this.goods_desc=res.data.data.info.goods_desc
        });
     // 获取当前购物车的总的商品数量
     getGoodsCount().then(res=>{
        // 获取当前的商品的总数量并赋值给badge
        this.badge = res.data.data.cartTotal.goodsCount
     })

    },
    beforeMount() { },
    mounted() { },
    beforeUpdate() { },
    updated() { },
    beforeDestroy() { },
    destroyed() { },
};
</script>
 <style scoped lang="less">
 
 .canshu{
    display: flex;
    font-size: small;
      float: left;
      margin-left:10px
   
 }
  /deep/img{
        width: 100%;
        display: block;
    }
    .clickback{
        position:fixed;
        top:15px;
        z-index: 33;
    }
 </style>